<template>
<div class="domain-container">
  <el-steps :active="active" simple finish-status="success">
    <el-step title="填写域名" icon="el-icon-edit-package"></el-step>
    <el-step title="域名校验" icon="el-icon-s-promotion"></el-step>
    <el-step title="证书上传" icon="el-icon-s-promotion"></el-step>
  </el-steps>
  <el-card class="box-card" v-show="active===1">
    <el-form class="userName" ref="submitForm" :model="submitForm" :rules="rules">
      <el-form-item label="域名(请将该域名的CNAME解析至cus.1688iot.vip)" prop="domain">
        <el-input v-model="submitForm.domain"></el-input><span style="color:red;">温馨提示：请到商户号平台打开产品中心-开发配置-支付授权目录-添加，填写{{'https://'+(submitForm.domain==null||submitForm.domain==''?'您的域名':submitForm.domain)}}</span>
      </el-form-item>
      <el-button type="primary" size="small" style="margin: 0 auto; display: block;" @click="toCheckDomain('submitForm')" :loading="loading">下一步</el-button>
    </el-form>
  </el-card>
  <el-card class="box-card" v-show="active===2">
    <el-form class="userName">
      <el-form-item style="margin: 0;"><span>请解析 {{ checkHostname }} 的TXT记录类型值为：{{ checkdata }}</span>
        <el-button type="primary" size="small" style="margin: 0 auto; display: block;" @click="checkCertificate('submitForm')" :loading="loading">校验</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="box-card" v-show="active===3"><span style="color:red">请到阿里云的SSL证书上购买"免费版(个人)DV" 证书，申请成功后下载nginx版本，解压后将pem文件和key文件分别上传！</span>
    <el-form class="check" ref="fileList" :model="fileList" :rules="fileRules">
      <el-form-item label="上传PEM证书" prop="pem">
        <div class="file_upload_box">
          <input type="file" ref="pem" accept="*" @change="pemChangeHandle(fileList.pem)"><a href="#none">点击上传</a>
        </div>
      </el-form-item>
      <el-form-item>
        <label>{{pemname}}</label>
      </el-form-item>
      <el-form-item label="上传KEY证书" prop="key">
        <div class="file_upload_box">
          <input type="file" ref="key" accept="*" @change="keyChangeHandle(fileList.key)"><a href="#none">点击上传</a>
        </div>
      </el-form-item>
      <el-form-item>
        <label>{{keyname}}</label>
      </el-form-item>
      <el-button type="primary" size="small" style="margin: 50px auto 0px auto; display: block;" @click="submitHandle('fileList')" :loading="loading">提交</el-button>
    </el-form>
  </el-card>
</div>
</template>

<script>
  import { domainBinding, checkDomain, uploadKey, getDomain } from '@/api/getData'

  export default {
    name: 'Domain',
    data() {
      return {
        pemname: '',
        keyname: '',
        active: 1,
        submitForm: {
          id: '',
          domain: '',
          dictType: 'CUSTOMER'
        },
        rules: {
          domain: [
            { required: true, message: '请输入域名', trigger: 'blur' },
            { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
          ]
        },
        fileRules: {
          pem: [
            { required: true }
          ],
          key: [
            { required: true }
          ]
        },
        loading: false,
        fileList: {
          pem: '',
          key: ''
        },
        checkdata: '',
        checkHostname: '',
        name: 'fileListTeahcerUpload'
      }
    },
    async created() {
      //获取域名
      let host = await getDomain({ dictType: this.submitForm.dictType })
      if (host._result) {
        this.submitForm.domain = host.data.hostname
      }
    },
    methods: {
      toCheckDomain(submitForm) {
        this.$refs[submitForm].validate(async valid => {
          if (valid) {
            const returnData = await domainBinding({
                hostname: this.submitForm.domain,
                dictType: this.submitForm.dictType
              },
              {
                obj: this,
                key: 'loading'
              })
            //console.log(returnData)
            this.loading = false
            if (returnData._result) {
              this.checkdata = returnData.data.checkdata
              this.checkHostname = returnData.data.hostname
              this.active++
            }
          } else {
            return false
          }
        })
      },
      async checkCertificate(submitForm) {
        const returnData = await checkDomain({
            hostname: this.submitForm.domain,
            dictType: this.submitForm.dictType
          },
          {
            obj: this,
            key: 'loading'
          })
        if (returnData._result) {
          this.loading = false
          this.active++
        } else {
          this.loading = false
          return false
        }
      },
      async submitHandle(fileList) {
        this.fileList.key = this.$refs.key.files[0]
        this.fileList.pem = this.$refs.pem.files[0]
        this.fileList.dictType = this.submitForm.dictType
        const a = await uploadKey(this.fileList)
        if (a._result) {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        }
      },
      keyChangeHandle(fileList) {
        if (fileList !== '') {
          return false
        } else {
          //console.log(fileList)

          this.fileList.key = this.$refs.key.files[0]
          //console.log(this.$refs.key.files[0]!= null)
          if (this.$refs.key.files[0] != null) {
            this.keyname = this.$refs.key.files[0].name
          }
        }
      },
      pemChangeHandle(fileList) {
        if (fileList !== '') {
          return false
        } else {
          //console.log(fileList)
          this.fileList.pem = this.$refs.pem.files[0]
          if (this.$refs.pem.files[0] != null) {
            this.pemname = this.$refs.pem.files[0].name
          }

        }
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 666px;
    margin: 70px auto;
  }

  .file_upload_box {
    display: inline-block;
    width: 200px;
    height: auto;
    position: relative;
    overflow: hidden;
  }

  .file_upload_box input[type=file] {
    position: absolute;
    left: 0;
    top: 6px;
    width: 100px;
    line-height: 25px;
    opacity: 0;
    cursor: pointer;
  }

  .file_upload_box a {
    display: inline-block;
    width: 50%;
    line-height: 25px;
    text-align: center;
    font-family: "Microsoft yahei";
    background-color: #315baf;
    color: #FFF;
    font-weight: 700;
    text-decoration: none;
  }
  .domain-container{
    margin-top: 30px;
  }
</style>
